<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地球旋转</title>
		<style>
			body {
				background-image:url(image/02aotema.jpg);
			}

			.earthrotate {
				width: 606px;
				height: 600px;
				background-image:url(image/01earth.jpg);
				border-radius: 350px;

				/*设置坐标系*/
				position: relative;

				/*创建动画设置参数*/
				animation: run 5s linear infinite;
				/*名称，持续5秒，循环*/

			}

			.earthrotate:hover {
				/*鼠标移入暂停旋转，移出继续*/
				animation-play-state:paused ;
			}

			/*run是动画关键帧名称
			变形（形状的变化）--transform,rotate旋转，从0度开始旋转
			360度结束，速度不均匀，快慢不统一，解决方法加linear*/
			@keyframes run {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<h1>旋转地球</h1>
		<div class="earthrotate"></div>
	</body>
</html>
